<template>
	<div id='system' v-loading="loading">
		<div class="content-top">
			<span class="h1">基础管理</span>
			<span class="h2">商家管理</span>
		</div>
		<div class="top-btn clearfix">
			<div class="left-content">
				<!--<span class="tip">商家列表</span>-->
			</div>
			<div style="float:left">
				<el-button type="primary" @click="addPro()">添加商家</el-button>
			</div>
			<div class="right-search1">
				<el-input v-model="input" placeholder="输入关键词…"></el-input>
				<el-button type="primary" @click="searcj()" style="margin-left: 10px;">查看</el-button>
			</div>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="PName" label="商家名称">
			</el-table-column>
			<el-table-column prop="PayMoney" label="合计金额">
			</el-table-column>
			<el-table-column prop="Login" label="管理员">
			</el-table-column>
			<!--<el-table-column prop="PWD" label="密码">
			</el-table-column>-->
			<el-table-column prop="ManagerMan" label="负责人">
			</el-table-column>
			<el-table-column prop="Tel" label="电话">
			</el-table-column>
			<el-table-column label="Logo">
				<template slot-scope="scope">
					<el-button round size="mini" @click="lookLogo(scope.row.LogoFile)">查看logo</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link"><el-button type="primary">操作<i class="el-icon-arrow-down el-icon--right"></i></el-button></span>
						<el-dropdown-menu slot="dropdown" class="div">
							<el-dropdown-item>
								<el-button type="success" size="small" @click="modiy(scope.row.ID)">修改</el-button>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-button type="danger" size="small" @click="del(scope.row.ID)">删除</el-button>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<div class="pages">
			<el-pagination small :current-page="index" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background prev-text='上一页' next-text='下一页'>
			</el-pagination>
		</div>
		<!--添加弹框-->
		<el-dialog title="商家管理" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
					<el-form-item label="商家名称:">
						<el-input v-model="formLabelAlign.name"></el-input>
					</el-form-item>
					<el-form-item label="预付金额:">
						<el-input v-model="formLabelAlign.money"></el-input>
					</el-form-item>
					<el-form-item label="Logo:">
						<div>
							<el-upload class="upload-demo" ref="upload" :limit="limitnum" :on-change="handleChange" :action='fileUrl' :on-preview="handlePreview" :onSuccess="uploadSuccess" :onError="uploadError" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
								<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
								<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件</el-button>
								<img :src="imgUrl" class="logoImg" v-if="imgUrl" />
							</el-upload>
						</div>
					</el-form-item>
					<el-form-item label="管理员:">
						<el-input v-model="formLabelAlign.login"></el-input>
					</el-form-item>
					<el-form-item label="密码:">
						<el-input v-model="formLabelAlign.pass" type="password"></el-input>
					</el-form-item>
					<el-form-item label="确认密码:">
						<el-input v-model="formLabelAlign.repass" type="password"></el-input>
					</el-form-item>
					<el-form-item label="负责人:">
						<el-input v-model="formLabelAlign.manager"></el-input>
					</el-form-item>
					<el-form-item label="电话:">
						<el-input v-model="formLabelAlign.tel"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="quxia()">取 消</el-button>
			    <el-button type="primary" @click="newPro()">确 定</el-button>
			</span>
		</el-dialog>
		<!--修改弹框-->
		<el-dialog title="修改商家" :visible.sync="mark" width="30%" :before-close="handleClose">
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
					<el-form-item label="商家名称:">
						<el-input v-model="formLabelAlign.name"></el-input>
					</el-form-item>
					<el-form-item label="预付金额:">
						<el-input v-model="formLabelAlign.money"></el-input>
					</el-form-item>
					<el-form-item label="Logo:">
						<div>
							<el-upload class="upload-demo" ref="upload" :limit="limitnum" :on-change="handleChange" :action='fileUrl' :on-preview="handlePreview" :onSuccess="uploadSuccess" :onError="uploadError" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
								<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
								<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件</el-button>
								<img :src="imgUrl" class="logoImg" v-if="imgUrl" />
							</el-upload>
						</div>
					</el-form-item>
					<el-form-item label="管理员:">
						<el-input v-model="formLabelAlign.login"></el-input>
					</el-form-item>
					<el-form-item label="密码:">
						<el-input v-model="formLabelAlign.pass" type="password"></el-input>
					</el-form-item>
					<el-form-item label="确认密码:">
						<el-input v-model="formLabelAlign.repass" type="password"></el-input>
					</el-form-item>
					<el-form-item label="负责人:">
						<el-input v-model="formLabelAlign.manager"></el-input>
					</el-form-item>
					<el-form-item label="电话:">
						<el-input v-model="formLabelAlign.tel"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="quxia()">取 消</el-button>
			    <el-button type="primary" @click="edit()">确 定</el-button>
			</span>
		</el-dialog>
		<!--logo查看-->
		<el-dialog title="logo查看" :visible.sync="mark5" :before-close="handleClose" width="300px">
			<img :src="imgUl" class="logoImgs" />
			<span slot="footer" class="dialog-footer">
				<el-button @click="quxia()">关 闭</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import api from '../../../api/api'
	export default {
		name: 'provider',
		data() {
			return {
				mark5: false,
				imgUl: '',
				index: 1,
				total: 1,
				loading: false,
				fileList: [],
				limitnum: 1,
				fileUrl: '',
				labelPosition: 'left',
				formLabelAlign: {
					name: '',
					money: '',
					login: '',
					pass: '',
					manager: '',
					tel: '',
					repass:''
				},
				dialogVisible: false, //添加弹框
				input: '',
				tableData: [], //商家列表
				imgUrl: '',
				mark: false, //修改弹框
				id: '', //公用id
				imgs: '',
			}
		},
		created() {
			this.fileUrl = api.files
			this.getproviderlist()
		},
		methods: {
			//查找
			searcj() {
				this.index = 1
				this.getproviderlist()
			},
			//翻页
			handleCurrentChange(val) {
				this.index = val
				this.loading = true
				this.$axios.post(api.getproviderlist, {
					"Para": this.input,
					"PageSize": 10,
					"PageIndex": this.index - 1,
					"OrderbyString": "PName"
				}).then(res => {
					if(res.data.isOK) {
						this.loading = false
						this.tableData = res.data.data.Data
						this.total = res.data.data.Items ? res.data.data.Items : 1
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			handleClose(done) {
				this.quxia()
			},
			quxia() {
				this.dialogVisible = false;
				this.mark = false;
				this.mark5 = false;
			},
			submitUpload() {
				this.fileUrl = api.files
				this.$refs.upload.submit();
			},
			uploadSuccess(response, file, fileList) {
				this.$message({
					message: '上传成功',
					type: 'success'
				});
				this.imgs = response.data.filePaht.substring(2, response.data.filePaht.length)
			},
			uploadError(response, file, fileList) {
			},
			handleRemove(file, fileList) {},
			handlePreview(file) {},
			handleChange(file, fileList) {
				this.imgUrl = file.url
			},
			//获取商家列表
			getproviderlist() {
				this.loading = true
				this.$axios.post(api.getproviderlist, {
					"Para": this.input,
					"PageSize": 10,
					"PageIndex": this.index - 1,
					"OrderbyString": "PName"
				}).then(res => {
					if(res.data.isOK) {
						this.loading = false
						this.tableData = res.data.data.Data
						this.total = res.data.data.Items ? res.data.data.Items : 1
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			//新建商家弹框
			addPro() {
				this.formLabelAlign.name = ""
				this.formLabelAlign.money = ""
				this.formLabelAlign.login = ""
				this.formLabelAlign.pass = ""
				this.formLabelAlign.repass = ""
				this.formLabelAlign.manager = ""
				this.formLabelAlign.tel = ""
				this.fileList = [],
				this.dialogVisible = true;
			},
			//确认新建
			newPro() {
				if(this.formLabelAlign.pass != this.formLabelAlign.repass){
					this.$message.error('两次密码不一样');
				}else{
					this.loading = true
					this.$axios.post(api.addprovider, {
						"PName": this.formLabelAlign.name,
						"PayMoney": this.formLabelAlign.money - 0,
						"Login": this.formLabelAlign.login,
						"PWD": md5(this.formLabelAlign.pass),
						"ManagerMan": this.formLabelAlign.manager,
						"Tel": this.formLabelAlign.tel,
						"LogoFile": this.imgs,
					}).then(res => {
						if(res.data.isOK) {
							this.loading = false
							this.$message({
								message: '创建成功',
								type: 'success'
							});
							this.getproviderlist();
							this.dialogVisible = false;
						} else {
							if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
								this.$router.push({
									path: '/admin'
								})
							} else {
	
								this.loading = false
								this.$message.error(res.data.msg);
							}
						}
					})
				}
			},
			//修改弹框
			modiy(id) {
				this.id = id
				this.formLabelAlign.pass = ""
				this.getprovidermodel(this.id)
				this.mark = true
			},
			//通过模型获取商家
			getprovidermodel(id) {
				this.$axios.get(api.getprovidermodel + '/' + id).then(res => {
					if(res.data.isOK) {
						this.id = res.data.data.ID
						this.formLabelAlign.name = res.data.data.PName
						this.formLabelAlign.money = res.data.data.PayMoney
						this.formLabelAlign.login = res.data.data.Login
						//						this.formLabelAlign.pass = res.data.data.PWD
						this.formLabelAlign.manager = res.data.data.ManagerMan
						this.formLabelAlign.tel = res.data.data.Tel
						this.imgs = res.data.data.LogoFile
						this.imgUrl = api.host + res.data.data.LogoFile
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			//确认修改
			edit() {
				if(this.formLabelAlign.pass != "") {
					if(this.formLabelAlign.pass != this.formLabelAlign.repass){
						this.$message.error('两次密码不一样');
					}else{
						this.loading = true
						this.$axios.post(api.editprovider, {
							"ID": this.id,
							"PName": this.formLabelAlign.name,
							"PayMoney": this.formLabelAlign.money,
							"Login": this.formLabelAlign.login,
							"PWD": md5(this.formLabelAlign.pass),
							"ManagerMan": this.formLabelAlign.manager,
							"Tel": this.formLabelAlign.tel,
							"LogoFile": this.imgs
						}).then(res => {
							if(res.data.isOK) {
								this.loading = false
								this.$message({
									message: '修改成功',
									type: 'success'
								});
								this.loading = false
								this.getproviderlist();
								this.mark = false;
							} else {
								if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
									this.$router.push({
										path: '/admin'
									})
								} else {
									this.loading = false
									this.$message.error(res.data.msg);
								}
							}
						})
					}
				} else {
					this.$message.error("密码不能为空");
				}
			},
			//删除商家
			del(id) {
				this.loading = true
				this.$axios.get(api.delprovider + '/' + id).then(res => {
					if(res.data.isOK) {
						this.getproviderlist();
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			//查看logo
			lookLogo(urls) {
				this.mark5 = true
				this.imgUl = api.host + urls
			}
		}
	}
</script>

<style>
	.logoImg {
		margin-top: 10px;
		width: 80px;
		display: block;
	}
	
	.logoImgs {
		margin: auto;
		margin-top: 10px;
		width: 200px;
		display: block;
	}
</style>